<template>
  <div class="body1">
     <!-- 这是中部定位div -->
    <div class="zhongbuDIV">
        <div class="leftMax">
            <!-- 左上角的div -->
            <div class="leftMin"></div>
            <!-- 左下角div -->
            <div class="rightMin"></div>
        </div>
        <div class="lefttText">双线质量管控体</div>
        <div class="righttText">力求每件产品、每个细节都尽善尽美</div>
        <div class="bluetext"><h4>够专业&nbsp;&nbsp;&nbsp;才放心</h4></div>
        <!-- 这是右边的登录框 -->
        <div class="login">
            <div class="welconme">欢迎使用</div>
            <div class="xitongLOGIN"><h2>系统登陆</h2></div>
            <!-- 用户名 -->
            <div class="Logininput">
                <el-form :model ="ruleForm" label="left" :hide-required-asterisk ="true" :rules="rules" ref = "ruleForm" label-width="85px">
                   <div class="inputDiv" >
                       <el-form-item label ="用户名" prop="userName" >
                        <el-input autosize v-model="ruleForm.userName" style="width:250px">
                           <img slot="prefix" class="inputIcon" src="../assets/-e-用户名.png">
                        </el-input>
                       </el-form-item>

                   </div>
                    <div class="inputDiv" >
                       <el-form-item label ="密    码" prop="passWord">
                        <el-input autosize v-model="ruleForm.passWord" type="password" style="width:250px">
                           <img slot="prefix" class="inputIcon" src="../assets/-e-密码.png">
                        </el-input>
                       </el-form-item>

                   </div>
                </el-form>
            </div>
            <div class="denglu1"> <el-button type="primary" round class="denglu" @click="submitForm">登录</el-button></div>

        </div> 
    </div>
    <div class="xingxihao">All Rights Reserved ©2021 版权所有	 ｜ 粤ICP备18069755号</div>
    <div class="log">ORDER聚造
        <div class="log1">ORDER聚造</div>
    </div>

  </div>
</template>

<script>
import md5 from 'js-md5'


//import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'Login',
  components: {
    //HelloWorld
  },
  data(){
    return {
        ruleForm:{
            userName:"",
            passWord:""
        },
        rules:{
            userName:[
                {required:true,message:"请输入用户名",trigger:'blur'}
            ],
            passWord:[{required:true,message:"请输入密码",trigger:'blur'}]
        }

    }
  },
  methods:{
      submitForm(){
          this.$refs.ruleForm.validate((valid)=>{
              if(valid){
                  this.$http({
                      url:'/login',
                      method:'POST',
                      data:{
                          userName:this.ruleForm.userName,
                          passWord:md5(this.ruleForm.passWord),
                          platform:"Web"
                      }
                  }).then(res=>{
                      if(!res.errorMsg){
                          localStorage.setItem("token",res.token)
                          localStorage.setItem("user",JSON.stringify(res))
                          this.$router.push('/index?id=1&name=abc')
                      }
                  })

              }
            
          })
      }
    
  },
  created(){

  },
  mounted(){

  }
  
}
</script>

<style>

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

*{
    padding: 0px;
    margin: 0px;
}
.body1{
    background-image: url("../assets/图层 1@2x.png");
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow:hidden
}

.zhongbuDIV{
    width: 100%;
    height: 380px;
    display: flex;
    margin-top: 202px;
}
.leftMax{
    height: 326px;
    width: 207px;
    margin-left: 85px;
    position: absolute;
}
.leftMin{
    width: 118px;
    height: 162px;
    background-color: rgb(225,242,249,0.3);
    opacity: 0.3;
    display: flex;

}
.rightMin{
    width: 135px;
    height: 164px;
    background-color: rgb(225,242,249,0.3);
    margin-left: 72px;
    opacity: 0.3;
}
.lefttText{
    
    color: #FEFEFE;
    font-size: 18px;
    opacity: 1;
    position: relative;
    writing-mode: vertical-rl;
    width: auto;
    top: 15px;
    left: 133px;

}
.righttText{
    writing-mode: vertical-rl;
    color: #FEFEFE;
    font-size: 18px;
    position: relative;
    opacity: 1;
    top: 15px;
    left: 150px;

}
.bluetext{
    writing-mode: vertical-rl;
    font-size: 28px;
    color: #6BB9DA;
    position: relative;
    left: 165px;
    top: 65px;
    

}
.login{
    width: 359px;
    height: 359px;
    background: rgb(239,239,240,0.9);
    border-radius: 20px 20px 20px 20px;
    opacity: 0.9;
    margin-top: 21px;
    margin-left: 1300px;
}
.welconme{
    font-size: 12.99px;
    color: #96A3B0;
    margin-left: 32px;
    margin-top: 23px;
}
.xitongLOGIN{
    color: #4E4E4E;
    margin-left: 32px;
    margin-top: 6px;

}
.name{
    height: 37px;
    width: 100%;
    margin-top: 42px;
    display: flex;
    align-items: center;
}
.yonghumintg{
    margin-left: 30px;
    font-size: 13px;
    color: #737474;
    text-align: center;
    width: 40px;
    display: flex;
    justify-content: space-between;

}
.shukukuai{
    width: 256px;
    height: 37px;
    background: #F1F1F1;
    border-radius: 5px 5px 5px 5px;
    opacity: 1;
    border: 1px solid #DFEFFF;
    margin-left: 8px;
    display: flex;
    align-items: center;
}
.imag{
    width: 12px;
    height: 14px;
    margin-left: 12px;
    padding-right: 12px;
    
}
.inputname{
    height: 37px;
    width: 220px;
    border: none;
    background: #F1F1F1;
    outline:none; 
}
.denglu{
    width: 302px;


    color: #F4F4F5;
    font-size: 16px;
}
.denglu1{
    margin-top: 40px;
    margin-left: 30px;
}
.xingxihao{
    margin-top: 300px;
    text-align: center;
    width:auto;
    height: 16px;
}
.log{
    color: #D7E8FA;
    font-size: 36px;
    width: 200px;
    height: 46px;
    float: right;
    margin-right: 46px;
    margin-top: -40px;
}
.log1{
    color: #409EFF;
    font-size: 20px;
    margin-top: -20px;
    margin-left: 5px;
}
table td{
    padding: 10px;
  
}
.Logininput{
    margin-top: 40px;
}

/* .app1{
  background:url('/image/test.png');
  height: 300px;
} */
</style>
